Ext.ns('App.View');

App.View.Viewport = Ext.extend(Ext.Panel, {

	/**
	 * Init mainArea Compentent for Applcation view
	 *
	 * @return {void}
	 */
	initComponent: function() {
		var config = {
            id         : 'mainArea',
            baseCls    : (Ext.is.Phone) ? 'stPhone' : 'stDesktop',
			layout     : 'card',
			cardSwitchAnimation : 'slide',
			items: [{
				xtype: 'App.View.PresetList'
			},{
				xtype: 'App.View.CounterList'
			},{
				xtype: 'App.View.PresetListEdit'
			},{
				xtype: 'App.View.CounterListEdit'
			}],
			fullscreen : true
		};		
		Ext.apply(this, config);
		App.View.Viewport.superclass.initComponent.call(this);
		this.addEventListener();
	},
	
	/**
	 * Add custom eventlistener to the component
	 *
	 * @return {void}
	 */
	addEventListener: function() {
		App.on('setView', this.onSetView, this);
	},

	/**
	 * On set view event,
	 * switch to the given view
	 *
	 * @param {String} view    = View Name to show
	 * @param {Int}    index   = List entry id
	 * @param {Object} dataset = Store data to load
	 *
	 * @return {void}
	 */
	onSetView: function(view, efxType, efxDirection, index, dataset) {
		switch (view) {
			// Main list views
				case 'PresetList':
					this.setActiveItem( 0, { type: efxType,	direction: efxDirection });
					break;
				case 'CounterList':
					//TODO: push store data (dataset) of selected preset entry (index) to view
					var record = App.Store.Preset.getAt(index);
						console.log("Counter %o of Preset %o", record.data.counterSet, index);
						//this.update(record.data);
					this.setActiveItem( 1, { type: efxType,	direction: efxDirection });
					break;
			// Main list edit views
				case 'PresetListEdit':
					this.setActiveItem( 2, { type: efxType });
					break;
				case 'CounterListEdit':
					this.setActiveItem( 3, { type: efxType });
					break;
			// Catch Error
				default:
					Ext.Msg.alert('Error:', 'View ('+view+') not defined!', Ext.emptyFn);
					break;
		}
	}
});

Ext.reg('App.View.Viewport', App.View.Viewport);
